@page "/detail-item/{ProductId}"
@inherits WebUI.Features.AuthnComponent
@using WebUI.Model
@using WebUI.Services
@inject WebUI.Services.ItemService ItemService

<div class="section">
  <div class="container">
    <div class="content">
      <h3>Detail Product</h3>
    </div>
  </div>
  <div class="container">
    @if (ProductId != null && !string.IsNullOrEmpty(ProductId))
    {
      <div class="field">
        <label class="label">Product Name</label>
        <div class="control">
          <input class="input" type="text" disabled="disabled" value="@Item.Name">
        </div>
      </div>
      <div class="field">
        <label class="label">Image</label>
        <div class="control">
          <img src="@Item.ImageUrl" name="image" alt="image" />
        </div>
      </div>
      <div class="field">
        <label class="label">Price</label>
        <div class="control">
          <input class="input" type="number" disabled="disabled" value="@Item.Price">
        </div>
      </div>
      <div class="field">
        <div class="control">
          <a class="button is-primary" onclick=@(async () => await JsInteropService.Navigate())>Back</a>
        </div>
      </div>
    }
  </div>
</div>

@functions {

  [Parameter]
  string ProductId { get; set; }

  ItemModel Item { get; set; } = new ItemModel();

  protected override async Task OnInitAsync()
  {
    await EnsureAuthn();

    if (ProductId != null && !string.IsNullOrEmpty(ProductId))
    {
      Item = await ItemService.GetItem(new Guid(ProductId));
    }
  }

}
